<template>
	<view class="food-detail-container">
		<view class="food-header">
			<image :src="foodDetail.image || '/static/images/placeholder.png'" mode="aspectFill" class="food-image"></image>
			<view class="back-btn" @tap="goBack">
				<text class="iconfont icon-back"></text>
			</view>
		</view>
		
		<view class="food-info">
			<view class="food-name">{{foodDetail.name || ''}}</view>
			<view class="food-desc">{{foodDetail.description || ''}}</view>
			
			<view class="nutrition-card">
				<view class="nutrition-header">
					<text class="nutrition-title">营养成分</text>
					<text class="nutrition-unit">每{{foodDetail.unit || '100g'}}</text>
				</view>
				
				<view class="nutrition-main">
					<view class="nutrition-item">
						<view class="nutrition-value">{{foodDetail.calories || 0}}</view>
						<view class="nutrition-label">卡路里(kcal)</view>
					</view>
					<view class="nutrition-item">
						<view class="nutrition-value">{{foodDetail.carbs || 0}}g</view>
						<view class="nutrition-label">碳水</view>
					</view>
					<view class="nutrition-item">
						<view class="nutrition-value">{{foodDetail.protein || 0}}g</view>
						<view class="nutrition-label">蛋白质</view>
					</view>
					<view class="nutrition-item">
						<view class="nutrition-value">{{foodDetail.fat || 0}}g</view>
						<view class="nutrition-label">脂肪</view>
					</view>
				</view>
				
				<view class="nutrition-details">
					<view class="detail-item">
						<text class="detail-label">纤维素</text>
						<text class="detail-value">{{foodDetail.fiber || 0}}g</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">糖分</text>
						<text class="detail-value">{{foodDetail.sugar || 0}}g</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">钠</text>
						<text class="detail-value">{{foodDetail.sodium || 0}}mg</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">胆固醇</text>
						<text class="detail-value">{{foodDetail.cholesterol || 0}}mg</text>
					</view>
				</view>
			</view>
			
			<view class="add-record-section">
				<view class="section-title">添加到今日记录</view>
				
				<view class="amount-selector">
					<view class="amount-label">数量 ({{foodDetail.unit || 'g'}})</view>
					<view class="amount-control">
						<view class="amount-btn minus" @tap="decreaseAmount">
							<text class="iconfont icon-minus"></text>
						</view>
						<input 
							type="number" 
							v-model="amount" 
							class="amount-input"
							@blur="validateAmount"
						/>
						<view class="amount-btn plus" @tap="increaseAmount">
							<text class="iconfont icon-plus"></text>
						</view>
					</view>
				</view>
				
				<view class="meal-selector">
					<view class="meal-label">选择餐次</view>
					<view class="meal-options">
						<view 
							class="meal-option" 
							:class="{ active: mealType === 'breakfast' }"
							@tap="selectMeal('breakfast')"
						>
							<text class="meal-name">早餐</text>
						</view>
						<view 
							class="meal-option" 
							:class="{ active: mealType === 'lunch' }"
							@tap="selectMeal('lunch')"
						>
							<text class="meal-name">午餐</text>
						</view>
						<view 
							class="meal-option" 
							:class="{ active: mealType === 'dinner' }"
							@tap="selectMeal('dinner')"
						>
							<text class="meal-name">晚餐</text>
						</view>
						<view 
							class="meal-option" 
							:class="{ active: mealType === 'snack' }"
							@tap="selectMeal('snack')"
						>
							<text class="meal-name">加餐</text>
						</view>
					</view>
				</view>
				
				<view class="nutrition-summary">
					<view class="summary-title">摄入量</view>
					<view class="summary-content">
						<view class="summary-item">
							<text class="summary-label">卡路里</text>
							<text class="summary-value">{{calculatedCalories}}kcal</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">碳水</text>
							<text class="summary-value">{{calculatedCarbs}}g</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">蛋白质</text>
							<text class="summary-value">{{calculatedProtein}}g</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">脂肪</text>
							<text class="summary-value">{{calculatedFat}}g</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-bar">
			<button class="add-btn" @tap="addRecord">添加到饮食记录</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { getFoodDetail, addDietRecord } from '@/common/api/diet.js'
	
	// 食物ID
	const foodId = ref(0)
	// 食物详情
	const foodDetail = ref({})
	// 数量
	const amount = ref(100)
	// 餐次类型
	const mealType = ref('lunch')
	
	// 计算营养素
	const calculatedCalories = computed(() => {
		if (!foodDetail.value.calories) return 0
		return Math.round(foodDetail.value.calories * amount.value / 100)
	})
	
	const calculatedCarbs = computed(() => {
		if (!foodDetail.value.carbs) return 0
		return (foodDetail.value.carbs * amount.value / 100).toFixed(1)
	})
	
	const calculatedProtein = computed(() => {
		if (!foodDetail.value.protein) return 0
		return (foodDetail.value.protein * amount.value / 100).toFixed(1)
	})
	
	const calculatedFat = computed(() => {
		if (!foodDetail.value.fat) return 0
		return (foodDetail.value.fat * amount.value / 100).toFixed(1)
	})
	
	// 获取URL参数
	onMounted(() => {
		const query = uni.getSystemInfoSync().platform === 'mp-weixin' ? 
			getCurrentPages()[getCurrentPages().length - 1].options : 
			uni.getLaunchOptionsSync().query
		
		if (query && query.id) {
			foodId.value = Number(query.id)
			loadFoodDetail()
		}
	})
	
	// 加载食物详情
	const loadFoodDetail = async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})
			
			const res = await getFoodDetail({ id: foodId.value })
			
			if (res.code === 0) {
				foodDetail.value = res.data
			} else {
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('加载食物详情失败:', e)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 增加数量
	const increaseAmount = () => {
		amount.value = Number(amount.value) + 50
		validateAmount()
	}
	
	// 减少数量
	const decreaseAmount = () => {
		amount.value = Math.max(50, Number(amount.value) - 50)
		validateAmount()
	}
	
	// 验证数量
	const validateAmount = () => {
		const num = Number(amount.value)
		if (isNaN(num) || num <= 0) {
			amount.value = 100
		} else {
			amount.value = Math.round(num)
		}
	}
	
	// 选择餐次
	const selectMeal = (type) => {
		mealType.value = type
	}
	
	// 添加记录
	const addRecord = async () => {
		try {
			uni.showLoading({
				title: '添加中...'
			})
			
			const now = new Date()
			const year = now.getFullYear()
			const month = (now.getMonth() + 1).toString().padStart(2, '0')
			const day = now.getDate().toString().padStart(2, '0')
			const date = `${year}-${month}-${day}`
			
			const res = await addDietRecord({
				foodId: foodId.value,
				amount: amount.value,
				mealType: mealType.value,
				date: date
			})
			
			if (res.code === 0) {
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
				
				// 延迟返回
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} else {
				uni.showToast({
					title: res.message || '添加失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('添加记录失败:', e)
			uni.showToast({
				title: '添加失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.food-detail-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 120rpx;
		
		.food-header {
			position: relative;
			height: 400rpx;
			
			.food-image {
				width: 100%;
				height: 100%;
				background-color: #f0f0f0;
			}
			
			.back-btn {
				position: absolute;
				top: 40rpx;
				left: 30rpx;
				width: 70rpx;
				height: 70rpx;
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-back {
					font-size: 36rpx;
					color: #333;
				}
			}
		}
		
		.food-info {
			padding: 30rpx;
			
			.food-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.food-desc {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 30rpx;
				line-height: 1.5;
			}
			
			.nutrition-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.nutrition-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					
					.nutrition-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
					
					.nutrition-unit {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.nutrition-main {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					
					.nutrition-item {
						text-align: center;
						
						.nutrition-value {
							font-size: 36rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 5rpx;
						}
						
						.nutrition-label {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.nutrition-details {
					border-top: 1px solid #f0f0f0;
					padding-top: 20rpx;
					
					.detail-item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 15rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						.detail-label {
							font-size: 28rpx;
							color: #666;
						}
						
						.detail-value {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
			}
			
			.add-record-section {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				
				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.amount-selector {
					margin-bottom: 30rpx;
					
					.amount-label {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 15rpx;
					}
					
					.amount-control {
						display: flex;
						align-items: center;
						
						.amount-btn {
							width: 70rpx;
							height: 70rpx;
							background-color: #f5f5f5;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							
							.iconfont {
								font-size: 32rpx;
								color: #333;
							}
						}
						
						.amount-input {
							flex: 1;
							height: 70rpx;
							text-align: center;
							font-size: 32rpx;
							margin: 0 20rpx;
							background-color: #f5f5f5;
							border-radius: 8rpx;
						}
					}
				}
				
				.meal-selector {
					margin-bottom: 30rpx;
					
					.meal-label {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 15rpx;
					}
					
					.meal-options {
						display: flex;
						justify-content: space-between;
						
						.meal-option {
							flex: 1;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #f5f5f5;
							margin-right: 15rpx;
							border-radius: 8rpx;
							
							&:last-child {
								margin-right: 0;
							}
							
							&.active {
								background-color: #8cc9a1;
								
								.meal-name {
									color: #fff;
								}
							}
							
							.meal-name {
								font-size: 28rpx;
								color: #666;
							}
						}
					}
				}
				
				.nutrition-summary {
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 20rpx;
					
					.summary-title {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 15rpx;
					}
					
					.summary-content {
						display: flex;
						flex-wrap: wrap;
						
						.summary-item {
							width: 50%;
							margin-bottom: 10rpx;
							
							.summary-label {
								font-size: 24rpx;
								color: #999;
								margin-right: 10rpx;
							}
							
							.summary-value {
								font-size: 24rpx;
								color: #333;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
		
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 20rpx 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.add-btn {
				width: 100%;
				height: 80rpx;
				background-color: #8cc9a1;
				color: #fff;
				font-size: 30rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style> 